<script setup>
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import useUserStore from '@/stores/modules/user'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { handleTime } from '@/utils/time'
import { useRoute } from 'vue-router'
const route = useRoute()
const userStore = useUserStore()
const formRef = ref()
const rules = {
    username: [
        { min: 5, max: 10, message: '请输入6-10位的用户名', trigger: 'change' }
    ],
    password: [
        { min: 3, max: 10, message: '请输入6-10位的密码', trigger: 'change' }
    ]
}
const loginForm = reactive({
    username: 'admin',
    password: '123456'
})
const loadingFlag = ref(false)
const handleLogin = async () => {
    await formRef.value.validate()
    loadingFlag.value = true
    //login方法成功进入try
    try {
        await userStore.login(loginForm)
        const msg = handleTime()
        ElMessage.success(`登录成功${msg}`)

        const location = route.query.redirect
        if (location) {
            router.push({ path: location })
        } else {
            router.push('/')
        }

        //失败进入catch
    } catch (error) {
        console.log(error);
        ElMessage.error(error.message)
    }
    loadingFlag.value = false
}
</script>

<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24" class="right_container">
                <el-form class="login_form" :model="loginForm" :rules="rules" ref="formRef">
                    <div class="content_container">
                        <h1>Hello</h1>
                        <h2>欢迎来到科技世界</h2>
                        <el-form-item prop="username">
                            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" :prefix-icon="Lock" show-password
                                v-model="loginForm.password">111</el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="login_btn" @click="handleLogin"
                                :loading="loadingFlag">登录</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/BigBackground.png') no-repeat center;
    background-size: cover;

    .right_container {
        display: flex;
        justify-content: center;

        .login_form {
            position: relative;
            top: 30vh;
            width: 80%;

            h1 {
                width: 100%;
                color: white;
                font-size: 40px;
            }

            h2 {
                width: 100%;
                color: white;
                font-size: 20px;
                margin: 20px 0;
            }

            .el-form-item {
                width: 100%;
            }

            .login_btn {
                width: 100%;
            }
        }
    }

}
</style>